<script setup lang='ts'>
interface Props {
  isInHomepage?: boolean
  pageSize?: number
  // 球种id
  si?: number
}

defineOptions({ name: 'AppSportsEventEarly' })
const props = withDefaults(defineProps<Props>(), {
  pageSize: 9,
  si: 0
})

const sportsStore = useSportsStore()
const { earlyEventNavs, currentEarlyNav, } = storeToRefs(sportsStore)
const { VITE_SPORT_EVENT_PAGE_SIZE } = getEnv()

let timer: any = null
const page = ref(1)
const pageSize = ref(props.isInHomepage ? +VITE_SPORT_EVENT_PAGE_SIZE : props.pageSize)
const total = ref(0)
const list = ref<ISportEventInfo[]>([])

const params = computed(() => {
  return {
    si: props.isInHomepage ? currentEarlyNav.value : props.si,
    m: 1,
    ic: 0,
    ivs: 0,
    page: page.value,
    page_size: pageSize.value,
  }
})
const { run, runAsync } = useRequest(ApiSportEventList,
  {
    onSuccess(res) {
      if (res.d) {
        total.value = res.t
        list.value = res.d
      }
      else {
        total.value = 0
        list.value = []
      }
    },
  },
)

/** 👷 分页、定时器、监听更新数据 start 👷 */
function startTimer() {
  stopTimer()
  timer = setInterval(() => {
    getData()
  }, 120000)
}
function stopTimer() {
  if (timer !== null) {
    clearInterval(timer)
    timer = null
  }
}
function getData() {
  run(params.value)
}
function prePage() {
  page.value = page.value - 1
  getData()
}
function nextPage() {
  page.value = page.value + 1
  getData()
}
function reset() {
  page.value = 1
  total.value = 0
}
function updateDataByMqtt(data: ISportEventList[]) {
  list.value = sportsEventInfoListUpdateByMqtt(list.value, data)
}
/** 🚧 分页、定时器、监听更新数据 end 🚧 */

// 初始化数据
function initData() {
  return new Promise((resolve) => {
    let a = 0
    const t = setInterval(() => {
      a++
      if (currentEarlyNav.value !== -1) {
        clearInterval(t)
        runAsync(params.value).finally(() => {
          startTimer()
          resolve(true)
        })
      }
      else if (a > 300) {
        clearInterval(t)
        resolve(true)
      }
    }, 50)
  })
}

/** 切换球种 */
if (props.isInHomepage)
  watch(currentEarlyNav, (a, b) => {
    if (b !== -1) {
      reset()
      getData()
      startTimer()
    }
  })
else {
  watch(() => props.si, (a) => {
    reset()
    getData()
    startTimer()
  })
}

onActivated(() => {
  appEventBus.on(EventBusNames.SPORTS_DATA_CHANGE_BUS, updateDataByMqtt)
})
onDeactivated(() => {
  stopTimer()
  appEventBus.off(EventBusNames.SPORTS_DATA_CHANGE_BUS, updateDataByMqtt)
})
onBeforeUnmount(() => {
  stopTimer()
  appEventBus.off(EventBusNames.SPORTS_DATA_CHANGE_BUS, updateDataByMqtt)
})

if (props.isInHomepage)
  await application.allSettled([initData()])
else
  await application.allSettled([runAsync(params.value)])
</script>

<template>
  <div>
    <div class="font-semibold mb-[16px] text-[var(--color-text-white-0)] flex items-center leading-[32px]">
      <BaseIcon style="--tg-base-icon-color:#21A8F7;" name="spt-upcoming" class="text-[32px] mr-[8px]" />
      <span class="title">
        {{ $t('spt_early') }}
      </span>

    </div>
    <AppSportsTab v-if="isInHomepage" class="mb-[17px]" v-model="currentEarlyNav" :list="earlyEventNavs" />
    <div v-show="list.length > 0">
      <div class="grid gap-[16px]">
        <div class="min-w-0" v-for="event in list" :key="event.ei">
          <AppSportsMarketInfo :data="event" />
        </div>
      </div>
      <AppSportsPagination v-if="total > pageSize && !isInHomepage" @previous="prePage" @next="nextPage" :total="total"
        :page="page" :page-size="pageSize" class="mt-[16px]" />
    </div>
    <AppSportsEmpty v-if="list.length === 0" />
  </div>
</template>

<style>
:root {
  --bc-sports-event-early-title-font-size: 20px;
}
</style>

<style lang='scss' scoped>
.title {
  font-size: var(--bc-sports-event-early-title-font-size);
}
</style>
